<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">文本工具</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          提供各种文本处理工具，包括格式转换、字符处理、文本分析等功能
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in textTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始使用
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const textTools = [
  {
    id: 1,
    name: '文本转拼音',
    description: '将中文文本转换为拼音，支持多种格式输出',
    path: '/text-tools/pinyin',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 2,
    name: '简体繁体转换',
    description: '中文简体与繁体相互转换',
    path: '/text-tools/traditional',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 3,
    name: '英文大小写转换',
    description: '英文字母大小写转换，支持多种格式',
    path: '/text-tools/case-convert',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 4,
    name: '文本去重',
    description: '去除文本中的重复行或词语',
    path: '/text-tools/remove-duplicate',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 5,
    name: '文本替换',
    description: '批量替换文本中的指定内容',
    path: '/text-tools/replace',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 6,
    name: '文本排序',
    description: '按字母顺序或自定义规则排序文本',
    path: '/text-tools/sort',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 7,
    name: '字符计数器',
    description: '统计文本中的字符数、单词数、行数等',
    path: '/text-tools/counter',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 8,
    name: '文本反转',
    description: '将文本内容反转或倒序排列',
    path: '/text-tools/reverse',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 9,
    name: '文本对比',
    description: '对比两个文本的差异，高亮显示不同处',
    path: '/text-tools/compare',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 10,
    name: '在线剪切板',
    description: '提供在线剪切板功能，方便文本的临时存储与管理',
    path: '/text-tools/clipboard',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 11,
    name: '免费在线OCR',
    description: '提供在线免费批量Ocr文字识别服务，支持多种语言和图片格式',
    path: '/text-tools/ocr',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  }
]

// SEO
useHead({
  title: '文本工具 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线文本处理工具，提供拼音转换、简繁转换、大小写转换、文本去重、文本替换等多种实用功能' },
    { property: 'og:title', content: '文本工具 - 八八在线工具' },
    { property: 'og:description', content: '在线文本处理工具，提供拼音转换、简繁转换、大小写转换、文本去重、文本替换等多种实用功能' }
  ]
})
</script>